<template>
    <div>
        <el-scrollbar height="550px">
            <el-table :data="filterTableData" class="table_content">
                <el-table-column label="id" prop="id" width="80" />
                <el-table-column label="username">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="top" width="auto">
                            <template #default>
                                <div>username: {{ scope.row.username }}</div>
                            </template>
                            <template #reference>
                                <el-tag>{{ scope.row.username }}</el-tag>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="password" prop="password" />
                <el-table-column label="address" prop="address" />
                <el-table-column label="创建时间" prop="createdAt" width="200" />
                <el-table-column label="更新时间" prop="updatedAt" width="200" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="请输入用户名" />
                    </template>
                    <template #default="scope">
                        <el-button size="small" plain @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>

        <el-pagination background layout="prev, pager, next" :total="1000" />

        <el-dialog v-model="dialogFormVisible" title="请编辑你的内容" width="600">
            <el-form :model="form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地区" :label-width="formLabelWidth">
                    <el-select v-model="form.address" placeholder="请选择你的地区">
                        <el-option :label="data.name" :value="data.name" v-for="data in datalist" :key="data.ProID" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">返回</el-button>
                    <el-button type="primary" @click="handlieSubmit()">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import axios from 'axios';
import { onBeforeMount, ref, computed, reactive, toRaw } from 'vue'
const dialogFormVisible = ref(false)
const datalist = ref([])
const formLabelWidth = '140px'

// 对话框
const form = reactive({
    id: "",
    username: "",
    password: "",
    address: "",
})

const tableData = ref([])
const search = ref('')
onBeforeMount(async () => {
    await axios.get("http://localhost:3030/Allin/admin").then(res => {
        for (var i = 0; i < res.data.length; i++) {
            let update = new Date(res.data[i].updatedAt)
            let created = new Date(res.data[i].createdAt)
            var uptime = update.getFullYear() + "年" + (update.getMonth() + 1) + "月" + ("0" + update.getDate()).slice(-2) + "日" + "-" + (update.getHours()) + "时" + (update.getMinutes()) + "分"

            var creatime = created.getFullYear() + "年" + (created.getMonth() + 1) + "月" + ("0" + created.getDate()).slice(-2) + "日" + "-" + (created.getHours()) + "时" + (created.getMinutes()) + "分"

            res.data[i].updatedAt = uptime
            res.data[i].createdAt = creatime
            tableData.value.push(res.data[i])
        }
    })
})

// 编辑按钮
const handleEdit = async (index, row) => {
    dialogFormVisible.value = true

    await axios.get("../../json/chinaState.json").then(res => {
        datalist.value = res.data
        console.log(res.data)
    })
    Object.assign(form, row)

}
// 删除按钮
const handleDelete = async (index, row) => {
    await axios.delete(`http://localhost:3030/Allin/delete/?id=${row.id}`).then(res => {
        if (res.data.ok === 1) {
            location.reload();
        } else {
            alert("删除失败")
        }
    })

}


// 提交按钮
const handlieSubmit = async () => {
    console.log(form)
    await axios({
        method: "POST",
        url: "http://localhost:3030/Allin/updated",
        data: {
            username: form.username,
            password: form.password,
            address: form.address,
            id: form.id
        }
    }).then(res => {
        if (res.data.ok === 1) {
            location.reload();
        } else {
            alert("更新失败")
        }
    })
}

const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.username.toLowerCase().includes(search.value.toLowerCase())
    )
)
</script>

<style lang="scss" scoped>
.table_content {
    width: 100%;
    margin-top: 20px;
    height: auto;

}

.el-dialog {

    .el-form {
        height: 150px;
    }
}
</style>